import React, { Component } from 'react';
// （非默认）暴露一个函数nanoid，调用它生成唯一id值
import {nanoid} from 'nanoid';
import InputStyle from './index.module.css';


export default class Input extends Component {
  state = {
    intVal: ''
  }
  enter = (ev)=>{
    const {addTodoItem} = this.props;
    // 使用nanoid库生成随机的id值
    const id = nanoid();
    if(ev.keyCode === 13) {
      if(!this.state.intVal) {alert('输入不能为空'); return}
      // 发送数据给List组件
      addTodoItem({
        id,
        value: this.state.intVal,
        done: false
      })
    }
  }
  render() {
    return (
      <input type="text" placeholder="请输入你的任务名称，Enter键添加" className={InputStyle.inputBox} onKeyDown={this.enter} onChange={(ev) => { this.setState({ intVal : ev.target.value}) }} />
    )
  }
}
